window.onload = function(){
	const carouselConf = {
		index : 0,
		times : 3000,
		el : "#carousel-3d .carousel-3d-mask-item",
		toggleEL : "#carousel-3d .toggle",
		offsetX : 15,
		offsetY : 60
	}
	const carouselItemlist = document.querySelectorAll(carouselConf.el)
	const toggleList = document.querySelectorAll(carouselConf.toggleEL)
	function carouselToggleFade() {
		for (let i = 0; i < toggleList.length; i++) {
			if (i == carouselConf.index) {
				carouselItemlist[i].classList.add("active")
				toggleList[i].classList.add("active")
			}
			else {
				carouselItemlist[i].classList.remove("active")
				toggleList[i].classList.remove("active")
			}
		}
		carouselConf.index++
		if (carouselConf.index == toggleList.length) {
			carouselConf.index = 0
		}
	}
	setInterval(function(){
		carouselToggleFade()
	},carouselConf.times)
	const carousel = document.getElementById("carousel-3d")
	carousel.onmousemove = function(e) {
		let rect = carousel.getBoundingClientRect()
		let origX = rect.left + carousel.clientWidth/2
		let origY = rect.top + carousel.clientHeight/2
		let x = origX - e.pageX
		let y = origY - e.pageY
		this.style.transition = ""
		this.style.transform = "rotateX("+y/carouselConf.offsetX+"deg) rotateY("+x/carouselConf.offsetY+"deg)"
	}
	carousel.onmouseout = function() {
		this.style.transition = "transform 1.6s"
		this.style.transform = ""
	}
	for (let i = 0; i < toggleList.length; i++) {
		toggleList[i].index = i
		toggleList[i].onmouseover = function() {
			this.classList.add("active")
			carouselConf.index = this.index
			carouselToggleFade()
		}
	}

	const dotList = document.querySelectorAll(".panel .dot")
	for (let i = 0; i < dotList.length; i++) {
		let _self = dotList[i].querySelectorAll("li")
		for (var j = 0; j < _self.length; j++) {
			_self[j].index = j;
			_self[j].onmouseover = function() {
				let $index = this.index
				let imgNodeList = this.parentNode.parentNode.querySelectorAll(".img_cover img")
				for (let k = 0; k < _self.length; k++) {
					_self[k].classList.remove("active")
				}
				for (let k = 0; k < imgNodeList.length; k++) {
					imgNodeList[k].style.zIndex = "1"
				}
				this.classList.add("active")
				imgNodeList[this.index].style.zIndex = "2"
			}
		}
		
	}
}